<template>
	<view class="wrap">
		<view class="content" v-for="(item,index) in carList" :key='item.FindId' @click.stop="Findcardetails(item,'1')">
			<view class="main">
				<view class="img-content">
					<view class="img">
						<!-- <image :src="item.findImg" mode=""></image> -->
						<u-lazy-load :image="item.goodimg"></u-lazy-load>
					</view>

				</view>
				<view class="text-content">
					<view class="text-title">
						<text class="icon-xun">寻</text> <text class="title">
							{{item.car_Type_Name}}	{{item.car_name}}
						</text>
					</view>
					<view class="car-detail">
						<view class="car-detail">
							<view class="left">
								<view class="left">
									类型：
								</view>
							</view>
							<view class="right">
								{{item.specification}}
							</view>
						</view>
						<view class="car-detail">
							<view class="left">
								<view class="left">
									外观/内饰：
								</view>
							</view>
							<view class="right">
								<view class="" v-for="(color, ind) in item.facade_Picture" :key="ind">
									<view class="flex-jc-sb width-100 color-333" v-if="color.outerColour && color.inColour">
										<view :style="{ background: color.outerColour.colorCoding }" class="iconcolor"></view>
										{{ color.outerColour.color }} /{{ color.inColour.color }}
										<view v-if="color.inColour.neiColor.length == 1" :style="{ background: color.inColour.colorCoding }" class="iconcolor"></view>
										<view v-else class="iconcolor"><view class="iconcolor2" v-for="(it, i) in color.inColour.neiColor" :key="i" :style="{ background: it }"></view></view>
									
									</view>
								</view>
								<!-- {{item.facade_Picture}} -->
							</view>
						</view>
						<view class="car-detail">
							<view class="left">
								<view class="left">
									上牌地：
								</view>
							</view>
							<view class="right">
								{{item.goods_Region_Name}}
							</view>
						</view>
						<view class="car-detail">
							<view class="left">
								<view class="left">
									发布日期：
								</view>
							</view>
							<view class="right">
								{{item.addTime?item.addTime.split('T')[0]:''}} {{item.addTime?item.addTime.split('T')[1]:''}}
							</view>
						</view>
						<view class="car-detail">
							<view class="left">
								<view class="left">
									有效期至：
								</view>
							</view>
							<view class="right">
								{{item.deadline?item.deadline.split('T')[0]:''}} {{item.deadline?item.deadline.split('T')[1]:''}}
							</view>
						</view>
					</view>
					<view class="car-text">
						{{item.reason}}
					</view>
				</view>
			</view>
			<view class="bottom-text">
				<view class="left width-65">
					<view class="browse">
						<text>{{item.views}}</text> 次浏览/已有 <text>{{item.offerAmount}}</text> 家车商报价
					</view>
					<view class="time">
						剩余报价时间：<u-count-down separator-size="24" font-size="24" :timestamp="item.countdown" separator="zh"></u-count-down>
					</view>
				</view>
				<view class="right width-35">
					<view class="btn" @click.stop="Findcardetails(item,'2')">
						我要报价
					</view>
					<view class="">
						报价后可联系买方
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		props: {
			carList: {
				type: Array,
				default: function() {
					return [];
				},
			},
			carDetail: {
				type: Array,
				default: function() {
					return [];
				}
			}
		},
		data() {
			return {
	
			}
		},
		methods: {
  //寻车详情
    Findcardetails(val,type) {
      // type--1 寻车详情 2我要报价  同一页面 根据type不同展示不同内容
      uni.navigateTo({
        url: '/pages_findCar/noQuotationForFindCar/noQuotationForFindCar?id='+val.id+'&storeId='+val.store_Id+'&type='+type
      })
    },
		}
	}
</script>

<style lang="scss">
	@mixin icon-xun() {
		width: 36rpx;
		height: 36rpx;
		background: #fbb000;
		color: #fff;
		border-radius: 4rpx;
		padding: 0rpx 4rpx;
		font-size: 32rpx;
	}

	$colorEB5C02:#EB5C02;

	.wrap {
		// width: 100%;
    background-color: #F6F6F6;
		margin-bottom: 30rpx;

		.content {
			margin: 20rpx 0rpx;
			background: #fff;
			border-radius: 10rpx;

			.main {
				width: 100%;
				border-bottom: 2rpx solid #EEEEEE;
				display: flex;

				.img-content {
					padding: 2%;

					.img {
						width: 200rpx;
						height: 133rpx;
						border-radius: 5px;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}

				.text-content {
					width: 65%;
					flex: 1;
					padding: 2%;

					.icon-xun {
						@include icon-xun
					}

					.title {
						color: #333333;
						font-size: 28rpx;
						line-height: 46rpx;
						margin-left: 4rpx;
					}

					.car-detail {
						display: flex;
						padding: 6rpx 0px;
						flex-wrap: wrap;
						font-size: 26rpx;

						.left {
							width: 160rpx;
							color: #999999;
						}

						.right {
							flex-grow: auto;
							color: #333333;
						}
					}

					.car-text {
						color: #EB5C02;
						font-size: 26rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						-o-text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
			}

			.bottom-text {
				display: flex;
        align-items: center;
				font-size: 24rpx;
				padding: 2% 3%;
				color: #999;

				.left {
					width: 60%;
					line-height: 50rpx;

					.browse {
						text {
							font-weight: bold;
							color: $colorEB5C02;
						}
					}

					.time {
						text {
							color: #333;
						}
					}
				}

				.right {
					flex: 1;
					width: 40%;
					line-height: 40rpx;
					text-align: right;

					.btn {
						width: 171rpx;
						height: 56rpx;
						line-height: 56rpx;
						font-size: 30rpx;
						color: #333;
						background: #FFE03A;
						text-align: center;
						border-radius: 40rpx;
						display: inline-block;
					}
				}
			}
		}
	}
	.width-65{
		width: 65% !important;
	}
	.width-35{
		width: 35% !important;
	}
</style>
